<template lang="pug">
  .leftPanel(:class="{hidden: isHideLeft}" )
    .hidden-button(@click="hideLeft()")
      img(:src="require(`@/assets/leftPanel/arrow-${arrowImg}.svg`)" style="width: 14px;")
    .title-box
    .content
        component(:is='curMenu' v-if="curMenu")

</template>

<script>
import GlobalOverview from '@/components/leftPanel/GlobalOverview'
import SiteInfo from '@/components/leftPanel/SiteInfo'

import olUtils from '@/scripts/olBasicUtils'

import { mapState, mapMutations } from 'vuex'
export default {
  name: 'leftPanel',
  components: {
    GlobalOverview,
    SiteInfo
  },
  computed: {
    ...mapState({ // 这里的...是超引用，ES6的语法，意思是state里有多少属性值我可以在这里放多少属性值
      curMenu: state => state.pageStatus.curMenuName,
      isHideLeft: state => state.pageStatus.isHideLeft
    })
  },
  data () {
    return {
      curContent: '',
      isHide: true,
      arrowImg: 'right'
    }
  },
  watch: {
    // 隐藏
    isHideLeft (newV) {
      this.arrowImg = newV ? 'right' : 'left'
      if (newV) return olUtils.PanByPixel(-240, 0)
      olUtils.PanByPixel(240, 0)
    },
    // 组件变化时
    curMenu () {
      this.leftPanelHide(false)
    }
  },
  mounted () {

  },
  methods: {
    ...mapMutations('pageStatus', [
      'leftPanelHide'
    ]),
    // 隐藏按钮
    hideLeft () {
      this.leftPanelHide(!this.isHideLeft)
      if (this.isHideLeft) {
        // 收起
        olUtils.PanByPixel(-240, 0)
      } else {
        // 打开
        olUtils.PanByPixel(240, 0)
      }
    }

  }
}
</script>

<style lang="stylus" scoped>
.leftPanel
    position: absolute;
    top: 0;
    left: 0;
    width: 480px;
    height: 100%;
    min-height: 540px;
    z-index: 111;
    transition: all ease-in-out 0.4s;
    &.hidden
        left -480px
.hidden-button
  position absolute
  width 20px
  height 56px
  border-radius: 0 6px 6px 0;
  right: -20px;
  top: 108px;
  background-color: rgba(0,0,0,.25);
  backdrop-filter: blur(15px);
  cursor pointer
  display flex
.title-box
    height 164px
    background-color: #0000002b;
    backdrop-filter: blur(15px);
.content
    height calc(100% - 164px)
    background-color #fff
    box-shadow: 2px 0 3px -2px #6666668c;

</style>
